<template>
  <div class="home">
    <el-container class="main-container">
      <el-header style="background-color: rgb(87, 97, 137)">
        <div class="header">
          <span class="proTitle">管理系统</span>
          <div class = "userNick">  {{ userNick }}  </div>
          <el-dropdown class="logout">
            
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>  
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>

                <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>

              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="content-container">
        <el-aside width="200px" style="background-color: #545c64">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <el-menu-item index="/" @click="goToHome">
              <el-icon><House /></el-icon>
              <span>返回首页</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/productManage">项目管理</el-menu-item>
              <el-menu-item index="/categoryManage">分类管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Tools /></el-icon>
                <span>工具</span>
              </template>
              <el-menu-item index="/editer">富文本编辑器</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import request from "@/utils/request";
import router from '@/router'
import store from "@/store";
import { ElMessage } from 'element-plus'
import { House, Setting, Tools } from '@element-plus/icons-vue'

export default {
  components: {
    House,
    Setting,
    Tools
  },
  data() {
    return {
        userNick: localStorage.getItem("userNick")

    };
  },
  created(){
   
  },
  methods: {
    logout(){
      this.$router.push("/Login");
    },
    goToHome() {
      this.$router.push("/")  // 跳转到首页
    }
  },
  compute:{
    userNick: function(){
      return store.state.userNick;
    }

  }
};
</script>
<style>
.home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-container {
  flex: 1;
  overflow: hidden;
}

.main-content {
  overflow-y: auto;
  height: 100%;
}

.header {
  margin-top: 10px;
  text-align: center;
  display: flex;
  position: relative;
}
.header .proTitle {
  font-family: "楷体", "宋体", serif;
  font-size: 40px;
}
.proTitle {
  margin-left: 40%;
}
.logout {
  margin-left: auto;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 15px;
}

/* 添加图标样式 */
.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
  margin-right: 10px;
  font-size: 18px;
}

/* 菜单项样式优化 */
.el-menu-item {
  height: 56px;
  line-height: 56px;
  padding: 0 20px !important;
}

.el-menu-item:hover,
.el-menu-item:focus {
  background-color: #263445 !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  color: #fff !important;
}

/* 子菜单样式 */
.el-sub-menu__title {
  padding-left: 20px !important;
}

.el-menu-item [class^="el-icon-"] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

/* 图标与文字对齐 */
.el-menu-item span,
.el-sub-menu__title span {
  margin-left: 5px;
}
</style>
